<template>
    <!-- 新契约工作列表模块-end单 -->
    <div class="fillcontain">
        <!-- 查询条件 -->
        <div class="fastQuery">
            <el-row>
                <el-col :span="2" class="fastQuery_title"><i class="el-icon-tickets"></i><span> 查询条件</span></el-col>
                <el-col :span="10">
                    <el-badge :value="warnCount" class="item fastQuery_item">
                        <el-button size="small" :class="{isActive:searchParams.queryType == 'WARN'}"
                                   @click="searchParams.queryType = 'WARN';getList(); ">预警
                        </el-button>
                    </el-badge>
                    <el-badge :value="unprocessTotalCount" class="item fastQuery_item" type="warning">
                        <el-button size="small" :class="{isActive:searchParams.queryType == 'TODO'}"
                                   @click="searchParams.queryType = 'TODO';getList();">全部
                        </el-button>
                    </el-badge>
                </el-col>
                <el-col :span="4" class="moreCondition">
                    <span v-if="!isShow" @click="showorhide">更多条件 <i class="el-icon-d-arrow-right"></i></span>
                    <span v-if="isShow" @click="showorhide">收起 <i class="el-icon-d-arrow-left"></i></span>
                </el-col>
                <el-col :span="8"></el-col>
            </el-row>
        </div>
        <!-- 查询表单 -->
        <el-form v-show="isShow" :model="searchParams" :rules="rules" ref="ruleForm" label-width="120px"
                 class="search_container">
            <el-row>
                <el-col :span="6">
                    <el-form-item label="保单号" prop="chdrnum">
                        <el-input clearable v-model="searchParams.chdrnum" placeholder="保单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="受理号" prop="caseno">
                        <el-input clearable v-model="searchParams.caseno" placeholder="受理号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="电子投保标识" prop="appFrom">
                        <el-select clearable v-model="searchParams.appFrom" placeholder="电子投保标识">
                            <el-option v-for="item in appFroms" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!--<el-col :span="6">
                    <el-form-item label="任务类型" prop="routeid">
                        <el-select v-model="searchParams.routeid" placeholder="任务类型">
                            <el-option v-for="item in routeids" :key="item.value" :label="item.label"
                                       :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>-->
                <el-col :span="6">
                    <el-form-item label="投保人" prop="insuredname">
                        <el-input clearable v-model="searchParams.policyholdername" placeholder="投保人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="被保人" prop="policyholdername">
                        <el-input clearable v-model="searchParams.insuredname" placeholder="被保人"></el-input>
                    </el-form-item>
                </el-col>
                <!--    第二被保人需求  start          -->
                <el-col :span="6">
                  <el-form-item label="第二被保人" prop="secondInsuredName">
                    <el-input clearable v-model="searchParams.secondInsuredName" placeholder="第二被保人"></el-input>
                  </el-form-item>
                </el-col>
                <!--    第二被保人需求  end          -->
                <el-col :span="6">
                    <el-form-item label="检出人" prop="checkoutusrid">
                        <el-input clearable v-model="searchParams.checkoutusrid" placeholder="检出人"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6" class="text_center">
                    <el-button type="primary" icon="el-icon-search" @click="subGetList"></el-button>
                    <el-button type="primary" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
                </el-col>
            </el-row>

        </el-form>

        <div class="contain">
            <!-- 操作按钮 -->
            <el-row>
                <el-col :span="24" class="pb15 pt5">
                    <div v-if="showNext" style="display: inline;">
                        <el-button type="danger" style="margin-left: 10px;" plain v-for="(value,key) in nextNodeMap"
                                   :key="key" @click="exchangeNode(key)">{{nextNodeMap[key].destNodeName}}
                        </el-button>
                    </div>
                    <el-button type="danger" style="margin-left: 10px;"  plain @click="lock()">加锁</el-button>
                    <el-button type="danger"  plain @click="unlock()">解锁</el-button>
                </el-col>
            </el-row>
            <!-- 查询结果列表 -->
            <div class="table_container">
                <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
                          highlight-current-row header-cell-class-name="table-header-class"
                          @selection-change="handleSelectionChange"
                          empty-text="无符合查询条件任务"
                          @sort-change="changeTableSort"
                          :row-style="rowStyle"
                          style="width:100%">
                    <el-table-column type="selection" :selectable="interceptVip"></el-table-column>
                    <el-table-column property="checkoutusrid" label="检出人" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="risk" label="保单类型" align='center' show-overflow-tooltip min-width="80"></el-table-column>
                    <el-table-column property="orgName" label="机构" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="channel" label="渠道" align='center' show-overflow-tooltip min-width="50"></el-table-column>
                    <el-table-column property="caseno" label="受理号" align='center' show-overflow-tooltip min-width="80"></el-table-column>
                    <el-table-column property="chdrnum" label="保单号" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="policyholdername" label="投保人" align='center'
                                     show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="insuredname" label="被保险人" align='center'
                                     show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="mainContractName" label="主合同名称" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="taskLevel" label="任务级别" align='center' sortable show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="apptime" label="受理日" align='center' sortable show-overflow-tooltip min-width="160"></el-table-column>
                    <el-table-column property="dealtime" label="最近处理时间" align='center' show-overflow-tooltip min-width="160"></el-table-column>
                    <el-table-column property="remark01" label="多保单标识" align='center' show-overflow-tooltip min-width="100">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="showMorePolicy(scope.row.policyholderno)" v-if="scope.row.remark01 == '0'" :disabled="!interceptVip(scope.row, scope.index)">{{scope.row.policyholderno}}
                            </el-link>
                            <el-link type="primary"  v-if="scope.row.remark01 != '0'" :disabled="!interceptVip(scope.row, scope.index)">{{scope.row.policyholderno}}
                            </el-link>
                        </template>
                    </el-table-column>
                    <el-table-column property="groupno" label="组号" align='center' show-overflow-tooltip min-width="100"></el-table-column>
                    <el-table-column property="historyHandler" label="历史处理人" align='center' show-overflow-tooltip min-width="120"></el-table-column>
                    <el-table-column property="remark" label="备注" align='center' show-overflow-tooltip min-width="120">
                        <template slot-scope="scope">
                            <el-link type="primary" @click="showRemark(scope.row.taskno)" :disabled="!interceptVip(scope.row, scope.index)">{{ scope.row.remark }}</el-link>
                        </template>
                    </el-table-column>
                    <el-table-column property="taskChange" label="任务流转" align='center' show-overflow-tooltip min-width="80">
                        <template slot-scope="scope">
                             <el-link type="primary" @click="showChange(scope.row.taskno)" :disabled="!interceptVip(scope.row, scope.index)">任务流转</el-link>
                            <!-- <span class="operationIcon ml10" @click="showChange(scope.row.taskno)">
                                <i class="el-icon-link"></i>
                            </span> -->
                        </template>
                    </el-table-column>
                    <el-table-column property="imageInfo" label="影像信息" align='center' show-overflow-tooltip min-width="80">
                        <template slot-scope="scope" >
                            <span class="operationIcon" @click="showImageList(scope.row.caseno)" :style="{'pointer-events':!interceptVip(scope.row, scope.index) ? 'none': ''}">
                                <i class="el-icon-camera"></i>
                            </span>
                        </template>
                    </el-table-column>
                    <!--<el-table-column fixed="right" label="操作" align='center' show-overflow-tooltip min-width="80">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="goPage(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>-->
                </el-table>
                <el-row>
                    <el-col :span="24">
                        <div class="pagination">
                            <el-pagination
                                    background
                                    v-if='paginations.total > 0'
                                    :page-sizes="paginations.pageSizes"
                                    :page-size="paginations.pageSize"
                                    :layout="paginations.layout"
                                    :total="paginations.total"
                                    :current-page='paginations.pageIndex'
                                    @current-change='handleCurrentChange'
                                    @size-change='handleSizeChange'>
                            </el-pagination>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


        <!-- 备注-->
        <remark-list  :business="'NB'" :taskNo="remarkTaskNo" :drawer="showRemarkFlag" @close="hideRemark"></remark-list>
        <task-change-list  :business="'NB'" :taskNo="changeTaskNo" :drawer="showChangeFlag" @close="hideChange"></task-change-list>
        <!-- 同被保人多保单-->
        <more-policy-list  :business="'NB'" :policyholderno="morePolicyPolicyholderno" :drawer="showMorePolicyFlag" @close="hideMorePolicy"></more-policy-list>
        <!--影像列表-->
        <cdfs-image-list :drawer="showImageFlag" :applnum="showImageApplnum" @close="hideImageList"></cdfs-image-list>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import {nbTaskResetLvl, page} from "@/api/taskCenter/nbTask";
    import {exchangeNode, getNextNodes, getNodeMap, getSsyOrgMap, warnOrTimeOutCount,lock,unlock,unprocessTotalCount,warnOutSty} from "@/api/taskCenter/taskCommon";
    import constant from '@/utils/constant';
    import taskConstants, {getSelectList} from '@/utils/taskConstants';
    import remarkList from "../remarkList";
    import TaskChangeList from "../taskChangeList";
    import MorePolicyList from "../morePolicyList";
    import CdfsImageList from "@/page/common/cdfsImageList";

    export default {
        components: {
            CdfsImageList,
            MorePolicyList,
            TaskChangeList,
            remarkList
        },
        data() {
            return {
                warnCount: 0,//预警个数
                unprocessTotalCount:0,//未完成任务
                ssyMap: {},//机构对象
                nodeMap: {},//节点对象
                nextNodeMap: {},
                showNext:false,
                isShow: false,
                remarkTaskNo: "",
                showRemarkFlag: false,
                changeTaskNo: "",
                showChangeFlag: false,
                morePolicyPolicyholderno: "",
                showMorePolicyFlag: false,
                showImageFlag:false,
                showImageApplnum:'',
                // 查询条件
                rules: {
                    caseno: [{
                        pattern: /^[0-9]*$/,  //正则
                        message: '受理号只能输入数字'
                    }],
                    chdrnum: [{
                        pattern: /^[0-9]*$/,  //正则
                        message: '保单号只能输入数字'
                    }],
                    channel: [],
                    taskRank: [],
                    markNo: [],
                    institution: [],
                    acceptdate: [],
                    order: []
                },
                searchParams: {
                    pool: taskConstants.nbPoolType.END,//endd单
                    caseno: "",//受理号
                    chdrnum: "",//保单号
                    channel: "",//渠道
                    appFrom: "",//来源
                    routeid: taskConstants.RouteId.end,//节点
                    policyholdername: "",//投保人姓名
                    insuredname: "",//被保人姓名
                    companyid: "",//分公司
                    riskClass: "",//险种
                    groupno: "",//组号
                    checkoutusrid: "",//检出人
                    queryType: 'TODO',
                    taskLevelOrder: "",//受理号
                    taskTypeOrder: "routeid asc",//受理号
                    taskDealtimeOrder:"dealtime asc",
                    pageSize: "",
                    pageNumber: "",
                    secondInsuredName: "", // 第二被保人姓名
                },
                orderList: constant.order,
                multipleTable: [],
                tableData: [],
                appFroms: [],
                routeids: [{value: taskConstants.RouteId.hebao, label: "核保"}, {
                    value: taskConstants.RouteId.yhzhhf,
                    label: "照会回复"
                }],
                loading: false,
                //需要给分页组件传的信息
                paginations: {
                    total: 0,        // 总数
                    pageIndex: 1,  // 当前位于哪页
                    pageSize: 10,   // 1页显示多少条
                    pageSizes: [5, 10, 15, 20],  //每页显示多少条
                    layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    }
                },
                isFirstEnter:false
            }
        },
        created() {

            this.nextNodes();
        },
        activated() {
            this.getList();
            document.onkeydown = (event)=>{
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 113) {
                    this.getList();
                }
            };
        },
        mounted() {
            setTimeout(()=>{
                this.isFirstEnter=true;
            },100)
            this.appFroms = getSelectList(taskConstants.appFrom);
            getSsyOrgMap().then(data => this.ssyMap = data);
            getNodeMap().then(data => this.nodeMap = data);
            // this.getList();
        },
        methods: {
            rowStyle({ row, rowIndex}) {
                return warnOutSty(row,this.nodeMap);
            },
            getOrgName(value) {
                if (this.ssyMap && this.ssyMap[value] && this.ssyMap[value].sorgname)
                    return this.ssyMap[value].sorgname;
                else
                    return value;
            },
            getNodeName(value) {
                if (this.nodeMap && this.nodeMap["NB" + "_"+ value] && this.nodeMap["NB" + "_"+ value].content)
                    return this.nodeMap["NB" + "_"+ value].content;
                else
                    return value;
            },
            showRemark(taskNo) {
                this.remarkTaskNo = taskNo;
                this.showRemarkFlag = true;
            },
            showChange(taskNo) {
                this.changeTaskNo = taskNo;
                this.showChangeFlag = true;
            },
            hideRemark() {
                this.remarkTaskNo = "";
                this.showRemarkFlag = false;
            },
            hideChange() {
                this.changeTaskNo = '';
                this.showChangeFlag = false;
            },
            showorhide() {
                this.isShow = !this.isShow;
            },
            showErrorInfoList(taskno) {
               //通过字典明细表中定义的sdd_code列名称获取第三方平台路径
               const appContextUrl = JSON.parse(sessionStorage.getItem(constant.APP_CONTEXT_URL));
               if (appContextUrl == null) {
                   this.$message.error("请重新登录后重试！");
                   return;
               }
               const citicgis = appContextUrl['CITICGIS'];
               getCdfsAuthCode().then(res => {
                   if (res.resultCode == constant.SUCCESS && res.data) {
                        let href = citicgis + `/mistakeManager?requestType=list&authCode=${res.data.authCode}&loginUserId=${res.data.userId}&taskno=${taskno}`;
						window.open(href,'_blank');
                   }else {
                       this.$message.error(res.resultMsg);
                   }
               }).catch(error => {
                   this.$message.error("获取CDFS差错登记出错");
               });
            },

            showMorePolicy(morePolicyPolicyholderno) {
                this.morePolicyPolicyholderno = morePolicyPolicyholderno;
                this.showMorePolicyFlag = true;
            },
            hideMorePolicy() {
                this.morePolicyPolicyholderno = '';
                this.showMorePolicyFlag = false;
            },
            showImageList(applnum) {
                this.showImageApplnum = applnum;
                this.showImageFlag = true;
            },
            hideImageList() {
                this.showImageApplnum = '';
                this.showImageFlag = false;
            },
            //加锁
            lock() {
                this.$store.dispatch('loading/CHANGE_LOADING',true);
                let arr = [];
                this.$refs.multipleTable.selection.forEach(item => {
                    arr.push(item.taskno);
                });
                if (arr.length <= 0) {
                    this.$message.error("请选择任务！");
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    return;
                }
                lock(arr).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    if (res.resultCode == constant.SUCCESS) {
                        this.getList();
                    } else {
                        this.$alert(res.resultMsg, '错误信息', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'error',
                                    message: `action: ${action}`
                                });
                            }
                        });
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            //解锁
            unlock() {
                this.$store.dispatch('loading/CHANGE_LOADING',true);
                let arr = [];
                this.$refs.multipleTable.selection.forEach(item => {
                    arr.push(item.taskno);
                });
                if (arr.length <= 0) {
                    this.$message.error("请选择任务！");
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    return;
                }
                unlock(arr).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS) {
                        this.getList();
                    } else {
                        this.$alert(res.resultMsg, '错误信息', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'error',
                                    message: `action: ${action}`
                                });
                            }
                        });
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // 查询列表
            getList() {
                //获取预警任务个数
                this.queryWarnCount();
                this.paginations.total = 0;
                this.tableData = [];
                this.$store.dispatch('loading/CHANGE_LOADING',true)
                this.searchParams.pageNumber = this.paginations.pageIndex;
                this.searchParams.pageSize = this.paginations.pageSize;
                page(this.searchParams).then(res => {
                    console.log('参数', this.searchParams);
                    console.log('结果', res);
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS && res.data && res.data.list.length) {
                        this.paginations.total = res.data.total;
                        this.tableData = res.data.list;
                        this.tableData.forEach(item => {
                            item["orgName"] = this.getOrgName(item.organ);
                            item["nodeName"] = this.getNodeName(item.routeid);
                        })
                    }

                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            //查询预警个数
            queryWarnCount() {
                let routeids = "";
                routeids = this.searchParams.routeid;
                this.warnCount = 0;
                warnOrTimeOutCount(taskConstants.taskBusitype.NB, routeids).then(res => {
                    console.log('结果', res);
                    // this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.warnCount = res.data;
                    }
                }).catch(err => {
                    // this.$store.dispatch('loading/CHANGE_LOADING',false);
                });
                unprocessTotalCount(taskConstants.taskBusitype.NB, routeids).then(res => {
                    console.log('结果', res);
                    // this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS && res.data) {
                        this.unprocessTotalCount = res.data;
                    }
                }).catch(err => {
                    // this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            //获取核保、照会回复的下一节点
            nextNodes() {
                getNextNodes(taskConstants.RouteId.end,taskConstants.taskBusitype.NB).then(res => {
                    // this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS) {
                        res.data.forEach(item => {
                            this.nextNodeMap[item.destNode] = item;
                        });
                        this.showNext = true;
                    }
                }).catch(err => {
                    // this.$store.dispatch('loading/CHANGE_LOADING',false);
                });
            },
            //任务流转
            exchangeNode(routeid) {
                this.$store.dispatch('loading/CHANGE_LOADING',true);
                let arr = [];
                this.$refs.multipleTable.selection.forEach(item => {
                    arr.push(item.taskno);
                });
                if (arr.length <= 0) {
                    this.$message.error("请选择任务！");
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                    return;
                }
                exchangeNode(arr, routeid).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false)
                    if (res.resultCode == constant.SUCCESS) {
                        this.getList();
                    } else {
                        this.$alert(res.resultMsg, '错误信息', {
                            confirmButtonText: '确定',
                            callback: action => {
                                this.$message({
                                    type: 'error',
                                    message: `action: ${action}`
                                });
                            }
                        });
                        this.getList();
                    }
                }).catch(err => {
                    this.$store.dispatch('loading/CHANGE_LOADING',false);
                })
            },
            // vip权限拦截
            interceptVip(row, index) {
              let rowStr = JSON.stringify(row);
              if (rowStr.indexOf("*") > -1) {
                return false;
              }
              return true;
            },
            // 每页多少条切换
            handleSizeChange(pageSize) {
                this.paginations.pageSize = pageSize;
                this.getList();
            },
            // 上下分页
            handleCurrentChange(page) {
                this.paginations.pageIndex = page;
                this.getList();
            },
            // 根据条件查询列表
            subGetList() {
                this.paginations.pageIndex = 1;
                this.getList();
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            // 清除查询条件
            resetSearch() {
                this.searchParams.caseno = '';
                this.searchParams.chdrnum = '';
                this.searchParams.channel = '';
                this.searchParams.appFrom = '';
                this.searchParams.routeid = '';
                this.searchParams.policyholdername = '';
                this.searchParams.insuredname = '';
                this.searchParams.checkoutusrid = '';
                this.searchParams.taskTypeOrder = "routeid asc";
                this.searchParams.taskLevelOrder = "";
                this.searchParams.taskDealtimeOrder = "dealtime asc";
                this.$refs.multipleTable.clearSort();
            },
            //选择指定列进行排序
            changeTableSort(column){
                debugger;
                console.log(column);
                //获取字段名称和排序类型
                var fieldName = column.prop;
                var sortingType = column.order;
                //按照降序排序
                if(sortingType == "descending"){
                    if (fieldName == "nodeName"){
                        this.searchParams.taskTypeOrder = "routeid desc";
                    }
                    if (fieldName == "taskLevel"){
                        this.searchParams.taskLevelOrder = "task_level desc";
                    }
                    if (fieldName == "dealtime"){
                        this.searchParams.taskDealtimeOrder = "dealtime desc";
                    }
                } else{
                    //按照升序排序
                    if (fieldName == "nodeName"){
                        this.searchParams.taskTypeOrder = "routeid asc";
                    }
                    if (fieldName == "taskLevel"){
                        this.searchParams.taskLevelOrder = "task_level asc";
                    }
                    if (fieldName == "dealtime"){
                        this.searchParams.taskDealtimeOrder = "dealtime asc";
                    }
                }
                this.getList();
                console.log(this.tableData);
            },
        },
        watch: {
            ssyMap: function (newVal) {
                console.log(newVal);
                console.log(this.ssyMap);
                //重新渲染table
                this.tableData.forEach(item => {
                    item["orgName"] = this.getOrgName(item.organ);
                });
                this.tableData.push({});
                this.tableData.pop();
                console.log(this.tableData);
                console.log("重新渲染table");
            },
            nodeMap: function (newVal) {
                //重新渲染table
                this.tableData.forEach(item => {
                    item["nodeName"] = this.getNodeName(item.routeid);
                });
                this.tableData.push({});
                this.tableData.pop();
                console.log(this.tableData);
                console.log("重新渲染table");
            },
        },
        computed: {
            ...mapGetters(['tags']),
        },

    }
</script>

<style lang="less" scoped>
    .fillcontain {
        padding-bottom: 0;

        .fastQuery {
            padding: 15px 20px 10px 20px;
            background: #fff;
            border-bottom: 1px solid #e1e1e1;

            .fastQuery_title {
                color: #666;
                padding: 6px 0px;
            }

            .fastQuery_item {
                margin: 0 10px;
            }

            .item_default {
                .el-button {
                    color: #409EFF !important;
                    border-color: #c6e2ff !important;
                    background-color: #ecf5ff !important;
                }

            }

            .moreCondition {
                color: #68a3fc;
                cursor: pointer;
                padding: 6px 0px;

                .el-icon-d-arrow-right {
                    transform: rotate(90deg);
                }

                .el-icon-d-arrow-left {
                    transform: rotate(-90deg);
                }
            }
        }
    }

    .contain {
        background: #fff;
        padding: 10px;
        margin-bottom: 20px;
    }

    .pagination {
        padding: 10px 20px;
        text-align: right;
    }

    .operationIcon {
        // padding: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: inline-block;
        cursor: pointer;
        box-shadow: 0 0 3px #f9f9f9;

        .svg-icon {
            font-size: 14px;
            fill: #68a3fc;
        }
    }

    .search_container {
        padding: 20px 20px 0 20px;
    }

    .el-dropdown {
        vertical-align: top;
    }

    .el-dropdown + .el-dropdown {
        margin-left: 15px;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>



